<template>
  <a-modal v-model:visible="showModal" title="全部解冻" width="40vw" unmount-on-close>
    <div class="title"
      >是否将剩余押金 <span class="blue">{{ detailInfo.availableDepositAmount }}</span> 元全部解冻？</div
    >
    <page-form :model="form" layout="vertical" ref="formRef">
      <page-form-row gutter="24">
        <page-form-item field="remark" label="备注" size="1">
          <a-textarea class="textarea-in" placeholder="请输入" :max-length="200" v-model="form.remark" auto-size />
        </page-form-item>
      </page-form-row>
    </page-form>
    <template #footer>
      <a-button @click="onClose">关闭</a-button>
      <a-button type="primary" :loading="okLoading" @click="handleConfirm">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  import { thawDeposit } from '@/api/order/sOrder'
  import { Message } from '@arco-design/web-vue'

  const form = ref({})
  const detailInfo = ref({})
  const emit = defineEmits(['ok'])

  // 弹窗状态
  const showModal = ref(false)
  const show = (record) => {
    form.value = {}
    showModal.value = true
    detailInfo.value = { ...record }
  }
  const onClose = () => {
    showModal.value = false
  }
  const handleConfirm = () => {
    thawDeposit({
      id: detailInfo.value.id,
      remark: form.value.remark,
    }).then((res) => {
      if (res.code == 200) {
        emit('ok')
        Message.success('操作成功')
        onClose()
      }
    })
  }
  defineExpose({ show })
</script>

<style lang="less" scoped>
  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #1d2129;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 20px;
    .blue {
      color: #1890ff;
    }
  }
</style>
